<template>
  <div id="tk">
    <center><h2>退款</h2></center>

    <div id="newmain"></div>
  </div>
</template>
<script>
  import { getTf } from '../../api/incomeAndExpenses/statistics.js'

  export default {
    components: {},
    mixins: [],
    props: {},
    data() {
      return {
        //现金退费
        xjtf: 0,

        //微信退费、
        sjtf: 0,

        //支付宝
        zfbtf: 0,
      }
    },
    computed: {},
    watch: {},
    mounted() {
      getTf().then((rep) => {
        console.log(rep.data)

        for (let i = 0; i < rep.data.length; i++) {
          if ((rep.data[i].paymentPlatform = 0)) {
            this.xjtf = this.xjtf + parseFloat(rep.data[i].refundAmount)
          }else if ((rep.data[i].paymentPlatform = 1)) {
            this.sjtf = this.sjtf + parseFloat(rep.data[i].refundAmount)
          } else  {
            this.zfbtf = this.zfbtf + parseFloat(rep.data[i].refundAmount)
          }
        }

        this.showinfo(this.sjtf, this.xjtf,this.zfbtf )
      })
    },
    methods: {
      showinfo(sjtf, xjtf,zfbtf) {
        var myChart = this.$echarts.init(document.getElementById('newmain'))

        myChart.setOption({
          tooltip: {
            trigger: 'item',
          },
          legend: {
            top: '5%',
            left: 'center',
          },
          series: [
            {
              type: 'pie',
              radius: ['40%', '70%'],
              avoidLabelOverlap: false,
              label: {
                show: false,
                position: 'center',
              },
              emphasis: {
                label: {
                  show: true,
                  fontSize: 15,
                  fontWeight: 'bold',
                },
              },
              labelLine: {
                show: false,
              },
              data: [
                { value: xjtf, name: '现金退款' },
                { value: sjtf, name: '微信退款' },
                { value: zfbtf, name: '支付宝退款' }
              ],
            },
          ],
        })
      },
    },
  }
</script>
<style scoped>
  #newmain {
    /* position: absolute; left: 1000px; top: 40px;  */

    /* display: inline-block; */

    width: 400px;
    height: 280px;

    margin-left: 45px;

    /* display: inline-block; */
  }

  #tk {
    /* position: absolute; left: 1000px; top: 40px;  */

    /* width: 400px; height: 300px */
  }
</style>
